<template>
    <h1>Hello World</h1>
    <ul>
        <li v-for="item in data">{{item.content}}</li>
    </ul>
    <button @click="editData">添加任务项</button>
    <br>
    <input v-model="msg">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">修改</button>

</template>
<script setup lang="ts">
    import { ref } from 'vue'
    let data = ref([
    {id:1,content:'数据展示',completed:false},
    {id:2,content:'删除任务项',completed:false},
    {id:3,content:'增加任务项',completed:false}
    ])
    function editData(){
        data.value.push({id:4,content:'修改任务项',completed:false})
        data.value.splice(1,1)
    }
    let msg = ref('Hello World')
    function changeMsg(){
        msg.value = 'Hello Vue 3.0 + Vite'
    }
</script>

<style>

</style>